<template>
    <div class="warp">
        <div class="content">
            <div class="minTitle">
                <div class="flag"></div>
                <div class="text">评审设置</div>
            </div>
            <el-form ref="form" :model="formQuery" size="mini" class="el-form-box">
                <el-form-item label="人员类别" label-width="80px">
                    <el-select size="mini" @change="handleFindCfg()" v-model="formQuery.type">
                        <el-option
                            v-for="item in type"
                            :key="item.val"
                            :label="item.label"
                            :value="item.val">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div class="container">
                <div v-for="(item,i) in reviewData" :key="i">
                    <h6>{{titles[i]}}</h6>
                    <div class="configure-cont">
                        <div v-for="(n,j) in item" :key="j">
                            <p @click="getSetting(n)">
                                <label>{{n.rounds}}</label>
                                <span>{{n.startTime}}</span>
                            </p>
                            <img @click="handleDeleteCfg(n.id,item.length,j)"
                                 src="../../assets/reviews/icon_gegnduo@2x.png">
                        </div>
                    </div>
                    <div class="configure-add">
                        <el-button :disabled="item.length>=2" @click="handleAddExpert(i)"  type="primary" round>添加配置</el-button>
                    </div>
                </div>
            </div>
        </div>
        <rs-popover v-if="showPopover" :showPopover.sync="showPopover" :settingInfo="settingInfo" @commitPopover="handleFindCfg"></rs-popover>
    </div>
</template>

<script>
    import Qs from 'qs'
    import { findCfg,deleteCfg } from '@/service/api'
    import rsPopover from '@/components/reviewsManage/rsPopover'
    export default {
        name: "reviewSetting",
        data() {
            return {
                reviewData:[],
                titles:['续任正高','晋升正高','续任副高','晋升副高','续任中职','晋升中职'],
                showPopover:false,
                settingInfo:{},
                formQuery:{
                    type: '1', // 1军人干部 2文职人员
                },
                type:[
                    {label:'军人干部',val:'1'},
                    {label:'文职人员',val:'2'}
                ]
            }
        },
        created(){
            this.handleFindCfg()
        },
        methods:{
            handleFindCfg() {
                let params = {type:this.formQuery.type}
                findCfg(Qs.stringify(params)).then(res => {  //
                    if (res.code == 200) {
                        this.reviewData = this.objToArray(res.data);
                        console.log(this.reviewData)
                    } else {
                        console.log(res)
                    }
                });
            },
            objToArray (array) {
                let arr = []
                for (let i in array) {
                    arr.push(array[i]);
                }
                return arr;
            },
            getSetting(item) {
                this.settingInfo = Object.assign({},item);
                this.showPopover = true;
            },
            handleAddExpert(i) {
                this.showPopover = true;
                this.settingInfo = {};
                this.settingInfo.type = this.formQuery.type;
                this.settingInfo.typeStatus = i+1;
                this.settingInfo.rounds = this.reviewData[i].length+1;
            },
            handleDeleteCfg(id,length,index) {
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    if(length == 2 && index ==0){
                        this.$message.error('第二轮已存在，请先删除第二轮！');
                        return false;
                    }
                    let params = {id :id}
                    deleteCfg(Qs.stringify(params)).then(res => {  //
                        if (res.code == 200) {
                            console.log(res)
                            this.$message({
                                message: res.message,
                                type: 'success'
                            });
                            this.handleFindCfg()
                        } else {
                            console.log(res)
                        }
                    });
                }).catch(()=>{})

            }
        },
        components:{
            rsPopover
        }
    }
</script>

<style scoped>
    .warp{
        height: 100%;
        min-width: 800px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 9px 8px 2px rgba(43, 103, 254, 0.05);
        border-radius: 5px;
        overflow: hidden;
    }
    .content{
        width: 100%;
        height: 100%;
        padding: 30px 38px;
        box-sizing: border-box;
        overflow: hidden;
    }
    .minTitle{
        display: flex;
        flex-direction: row;
        align-items: center;
        background: #31478f0d;
        padding: 14px 0px;
        border-top: solid 1px #f3f3f3;
        position:relative;
    }
    .minTitle>.flag{
        width: 3px;
        background: #31478F;
        margin: auto 22px;
        height: 18px;
    }
    .minTitle>.text{
        color: #31478F;
        font-weight: bold;
        font-size: 17px;
    }
    .container{
        width: 100%;
        display: flex;
    }
    .container > div{
        width: 1px;
        flex: 1;
        height: 320px;
        background: #F2F2F2;
        margin: 0 10px;
        border-radius: 6px;
        overflow: hidden;
    }
    .container > div:first-child{
        margin-left: 0px;
    }
    .container > div:last-child{
        margin-right: 0px;
    }
    .container h6{
        line-height: 60px;
        padding-left: 28px;
        background: #ED9A57;
        font-size: 18px;
        font-weight: bold;
        color: #FFFFFF;
        margin-bottom: 24px;
    }
    .configure-cont{
        height: 160px;
    }
    .configure-cont > div{
        display: flex;
        /*margin: 0px 24px 16px;*/
        margin-bottom: 18px;
        justify-content: space-between;
        align-items: center;
    }
    .configure-cont > div p{
        display: flex;
        align-items: center;
        cursor: pointer;
        margin-left: 8px;
    }
    .configure-cont > div label{
        display: block;
        width: 26px;
        height: 26px;
        background: #ED9A57;
        border-radius: 50%;
        text-align: center;
        line-height: 26px;
        font-size: 13px;
        font-weight: bold;
        color: #FFFFFF;
    }
    .configure-cont > div span{
        display: block;
        font-weight: bold;
        margin-left: 16px;
        width: 60%;
    }
    .configure-cont > div img{
        display: block;
        width: 26px;
        cursor: pointer;
    }
    .configure-add{
        text-align: center;

    }
    .configure-add >>> .el-button.is-round{
        padding: 12px 34px !important;
    }
    .el-form-box{
        margin-top: 18px;
        display: flex;
    }
</style>
